import { gridSpacing } from '@/store/constant'
import { DatePeriod } from '@/types/common'
import { ChangeEvent } from 'react'
import { StackProps } from '@mui/system'

type Props = {
  params: DatePeriod
  setParams: (params: DatePeriod) => void
} & StackProps

const DatePeriodSelect = ({ params, setParams, ...others }: Props) => {
  const handleChangeDate = (key: string) => (e: ChangeEvent<HTMLInputElement>) => {
    const { value } = e.target
    setParams({ ...params, [key]: value })
  }
  return (
    <Stack spacing={gridSpacing} direction="row" alignItems="center" {...others}>
      {toPairs({ start_date: '开始时间', end_date: '结束时间' }).map(([key, label]: string[]) => (
        <Box key={key}>
          <TextField
            required
            value={get(params, key)}
            margin="dense"
            id={key}
            type="date"
            label={label}
            onChange={handleChangeDate(key)}
          />
        </Box>
      ))}
    </Stack>
  )
}

export default DatePeriodSelect
